<%--
  Created by IntelliJ IDEA.
  User: 20426
  Date: 2020/7/25
  Time: 11:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>影厅管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/back/layuiadmin/layui/css/layui.css" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">影厅名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="auditoriumsName" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                </div>
            </div>

            <div class="layui-card-body">
                <script id="auditoriums_tool_title" type="text/html">
                    <div class="layui-btn-container">
                        <button type="button" id="delete" class="layui-btn layui-btn-danger  layui-icon layui-icon-delete">删除影厅</button>
                        <button type="button" id="add" class="layui-btn"><i class="layui-icon"></i>添加影厅</button>
                        <button type="button" id="import" class="layui-btn  layui-btn-warm layui-icon layui-icon-upload-circle ">导入影厅</button>
                        <button type="button" id="import_demo" class="layui-btn  layui-btn-warm layui-icon layui-icon-upload-circle ">下载模板</button>
                        <button type="button" id="export" class="layui-btn layui-btn-primary  layui-icon layui-icon-download-circle">导出影厅</button>
                    </div>
                </script>
                <table id="auditoriums_list" lay-filter="auditoriums_list"></table>
                <script id="auditoriums_tool" type="text/html">
                    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="update"><i class="layui-icon layui-icon-edit"></i>修改</a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete"><i class="layui-icon layui-icon-delete"></i>删除</a>
                </script>
            </div>
        </div>
    </div>
</div>
<script src="${pageContext.request.contextPath}/back/layuiadmin/layui/layui.js"></script>
<script type="text/javascript">
    layui.config({
        base: '${pageContext.request.contextPath}/back/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['table','form','upload'], function(){
        var table = layui.table,form = layui.form,$ = layui.$,upload = layui.upload;;
        var cols = [[ //表头
            {type:"checkbox", width:60, fixed: 'left'}
            ,{title:"序号",type:"numbers", sort: true, width:100}
            ,{field: 'auditoriumsName', title: '影厅名称', sort: true, width:200}
            ,{field: '', title: '操作', sort: true, width:200,toolbar:"#auditoriums_tool"}
            ]];


        table.render({
            elem: '#auditoriums_list'
            ,url: '${pageContext.request.contextPath}/back/auditoriums' //数据接口
            ,even:true
            ,size:"lg"
            ,toolbar: "#auditoriums_tool_title"
            ,page: true //开启分页
            ,cols: cols
            ,parseData:function(res){
                return {
                    "code": 0, //解析接口状态
                    "msg": "搜索成功", //解析提示文本
                    "count": res.total, //解析数据长度
                    "data": res.list, //解析数据列表
                };
            }
        });

        // 添加
        $("#add").click(function(){
            layer.open({
                type: 1
                ,title:"添加影厅"
                ,content:$("#add_auditoriums_form")
                ,area: ['500px', '220px']
                ,btn: ['确定', '取消']
            });
        });
        form.on("submit(add_auditoriums)",function(data){
            let field = data.field;
            $.ajax({
                type:"post"
                ,url:"${pageContext.request.contextPath}/back/auditoriums"
                ,data:field
                ,success:function(result){
                    if(result){
                        layer.confirm("添加成功",function(){
                            location.reload();
                        },function () {
                            location.reload();
                        });
                    }else{
                        layer.msg("添加失败");
                    }
                }
                ,error:function(){
                    layer.msg("ajax错误");
                }
            });
        });

        // 修改影厅
        table.on("tool(auditoriums_list)",function(obj){
            var data = obj.data;
            if(obj.event == "update"){
                layer.open({
                    type: 1
                    ,title:"修改影厅"
                    ,content:$("#update_auditoriums_form")
                    ,area: ['500px', '220px']
                    ,btn: ['确定', '取消']
                });
                form.val("update_auditoriums_form",data);
            }
            if(obj.event == "delete"){
                layer.confirm("是否确认删除《"+data.auditoriumsName+"》？",function(){
                    $.ajax({
                        type:"delete"
                        ,url:"${pageContext.request.contextPath}/back/auditoriums/"+data.auditoriumsId
                        ,success:function(result){
                            if(result){
                                layer.confirm("删除成功",function(){
                                    parent.location.reload();
                                },function () {
                                    parent.location.reload();
                                });
                            }else{
                                layer.msg("删除失败");
                            }
                        }
                        ,error:function(){
                            layer.msg("ajax错误");
                        }
                    })
                })
            }
        });
        form.on("submit(update_auditoriums)",function(data){
            let field = data.field;
            console.log("1.",field);
            $.ajax({
                type:"put"
                ,url:"${pageContext.request.contextPath}/back/auditoriums"
                ,data:field
                ,success:function(result){
                    if(result){
                        layer.confirm("修改成功",function(){
                            parent.location.reload();
                        },function () {
                            parent.location.reload();
                        });
                    }else{
                        layer.msg("修改失败");
                    }
                }
                ,error:function(){
                    layer.msg("ajax错误");
                }
            });
        });

        // 查询
        form.on("submit(search)",function(data){
            var field = data.field;
            table.render({
                elem: '#auditoriums_list'
                ,url: '${pageContext.request.contextPath}/back/auditoriums' //数据接口
                ,toolbar: "#auditoriums_tool_title"
                ,where:field
                ,page: true //开启分页
                ,cols: cols
                ,parseData:function(res){
                    return {
                        "code": 0, //解析接口状态
                        "msg": "搜索成功", //解析提示文本
                        "count": res.total, //解析数据长度
                        "data": res.list, //解析数据列表
                    };
                }
            });
        });

        // 多选删除事件
        $("#delete").click(function(){
            // 获取选中行数据进数组
            var data = table.checkStatus('auditoriums_list').data;
            if(data.length == 0){
                layer.msg("请至少选中一个删除!");
                return;
            }
            var auditoriumsList = [];
            for(let i = 0; i< data.length; i++){
                auditoriumsList.push(data[i].auditoriumsId);
            }
            // 设置要显示删除的名称
            var text = "";
            for(let i = 0; i< data.length; i++){
                text += "&lt;"+data[i].auditoriumsName+"&gt;";
            }
            // 提示
            layer.confirm("是否确认删除："+text+"?",function () {
                $.ajax({
                    type:"delete",
                    url:"${pageContext.request.contextPath}/back/auditoriums",
                    contentType:"application/json;charset=utf-8",
                    data:JSON.stringify(auditoriumsList),
                    success:function(result){
                        if(result){
                            layer.confirm("删除成功",function () {
                                location.reload();
                            },function () {
                                location.reload();
                            })
                        }else{
                            layer.msg("删除失败");
                        }
                    },
                    error:function(){
                        layer.msg("ajax发送失败");
                    }
                });
            });
        });
        // 导入
        var uploadInst = upload.render({
            elem: '#import' //绑定元素
            ,url: '${pageContext.request.contextPath}/back/auditoriums/import' //上传接口
            ,accept: 'file'
            ,done: function(result){
                if(result){
                    layer.confirm("导入成功",function () {
                        location.reload();
                    },function () {
                        location.reload();
                    });

                }else{
                    layer.msg("导入失败");
                }
            }
            ,error: function(){
                layer.msg("上传失败");
            }
        });
        // 下载模板
        $("#import_demo").click(function(){
           location.href = "${pageContext.request.contextPath}/back/auditoriums/demo";
        });
        // 导出
        $("#export").click(function(){
            var index = layer.confirm("是否导出全部数据",function () {
              location.href="${pageContext.request.contextPath}/back/auditoriums/export";
              layer.close(index);
            });
        });



    });
</script>
<!-- 添加影厅from表单 -->
<div class="layui-form" id="add_auditoriums_form" style="display:none"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">影厅名称</label>
        <div class="layui-input-block">
            <input type="text" name="auditoriumsName" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="add_auditoriums">确认添加</button>
        </div>
    </div>
</div>

<!-- 修改影厅from表单 -->
<div class="layui-form" id="update_auditoriums_form" lay-filter="update_auditoriums_form" style="display:none"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <input type="hidden" name="auditoriumsId">
    <div class="layui-form-item">
        <label class="layui-form-label">影厅名称</label>
        <div class="layui-input-block">
            <input type="text" name="auditoriumsName" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="update_auditoriums">确认修改</button>
        </div>
    </div>
</div>


</body>